// Name:              Utility(辅助类)
//
// Description:       Useful classes(单一用途类, 如: m-l-10)
// Notict:            辅助类均不加空间名前缀

// clearfix 清除浮动
// ====================================================================
.clearfix {
  @include clearfix;
}

// over flow 内容溢出
.overflow-visible {
  overflow: visible !important;
}

.overflow-initial {
  overflow: initial !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-inherit {
  overflow: inherit !important;
}

// text align 文字对齐方式
// ======================================================================
.text-justify {
  text-align: justify !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

// Display 显示/隐藏内容
// =================================================================
.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.show {
  display: block !important;
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

// Float 快速浮动
// ==================================================================
// TODO(Sharon) remove pull-right, 用float-right 代替
.pull-left {
  float: left !important;
}

.pull-right {
  float: right !important;
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

// Margin & Padding
// 提供 0 至 40px 偶数间隔的 margin 和 padding 单用途类
// m: margin, p: padding
// l:  left, t: top, r: right, b: bottom
// x: 水平方向, y: 垂直方向
// 用例: m-l-10, m-10, m-auto 等
// =================================================================
@each $type, $typeAbbrev in (margin: m, padding: p) {
  @each $dir, $dirAbbrev in (left: l, top: t, right: r, bottom: b) {
    // 用例: m-l-8, p-t-10
    @for $i from 0 to 21 {
      $space: $i * 2;

      .#{$typeAbbrev}-#{$dirAbbrev}-#{$space} {
        #{$type}-#{$dir}: #{$space}px !important;
      }

      .#{$typeAbbrev}-#{$space} {
        // p-10
        #{$type}: #{$space}px !important;
      }

      // 水平方向 margin 和 padding 清零单例类, 用例: m-x-0, p-x-0
      .#{$typeAbbrev}-x-#{$space} {
        #{$type}-left: #{$space}px !important;
        #{$type}-right: #{$space}px !important;
      }

      // 垂直方向 margin 和 padding 清零单例类, 用例: m-y-0, p-y-0
      .#{$typeAbbrev}-y-#{$space} {
        #{$type}-top: #{$space}px !important;
        #{$type}-bottom: #{$space}px !important;
      }
    }

    // 各方向 margin 和 padding 设置 auto 值, 用例: m-l-auto, p-t-auto
    .#{$typeAbbrev}-#{$dirAbbrev}-auto {
      #{$type}-#{$dir}: auto !important;
    }
  }

  // margin 和 padding 整体设置为 auto, 用例: m-auto, p-auto
  @each $var in (auto) {
    .#{$typeAbbrev}-#{$var} {
      #{$type}: $var !important;
    }
  }
}

// 长、宽单一用途类, 使用百分比定义
// 用例: w-100: width: 100%; h-100: height: 100%
// =============================================================
@each $type, $typeAbbrev in (width: w, height: h) {
  @for $i from 1 through 10 {
    $size: $i * 10;
    .#{$typeAbbrev}-#{$size} {
      #{$type}: percentage($size * 0.01) !important;
    }
  }

  // w-auto, h-auto
  .#{$typeAbbrev}-auto {
    #{$type}: auto !important;
  }
}

// 折叠
// ========================================================
.collapse {
  display: none;
}
.collapse.show {
  display: block;
}

// 水平线分割线
// =========================================================
.divider-horizontal {
  margin: 10px 0;
}

// vertical-align 常用单例类
// ========================================================
.align-baseline {
  vertical-align: baseline !important;
}

.align-baseline-middle {
  vertical-align: -webkit-baseline-middle !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

// position 常用单例类
// ========================================================
.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-static {
  position: static;
}

.position-sticky {
  position: sticky;
}

// padding
// ========================================================
.p-0-20 {
  padding: 0 20px;
}

// 字体大小
// ========================================================
@for $i from 10 through 20 {
  .font-#{$i} {
    font-size: #{$i}px !important;
  }
}

// 标题类文字
.text-title {
  font-size: 14px;
}

// 字体粗细
// ========================================================
.bold {
  font-weight: bold;
}
